@charset "utf-8";
$font-size:12;/**********变量元素*********/
@function bgg($px){/************函数样式************/
    @return $px/$font-size*(640/640)*1rem;
}
html{/**************html根字体大小**************/
    font-size: $font-size*1px;
}

/***********这里是页面*********/
.web{
    width: 100%;
    height: 100%;
    margin: 0 auto;
    header{/***********头部样式************/
//      width: 100%;
//      height: bgg(86);
//      background: rgba(0,0,0,0.7);
//      display: inline-block;
//      font-size: 0;
//      .search_box{
//          position: relative;
//          .yuan{
//              width: bgg(50);
//              height: bgg(50);
//              background: #b60005;
//              border-radius: 50%;
//              margin-top: bgg(18);
//              margin-left: bgg(12);
//          }
//          .font{
//              font-size: bgg(40);
//              color: #ffffff;
//              position: absolute;
//              top: bgg(3);
//              left: bgg(18);
//          }
//          input{
//              width: bgg(534);
//              height: bgg(52);
//              border: bgg(2) solid #ffffff;
//              color: #ffffff;
//              font-size: bgg(26.89);
//              background: #1f1f1f;
//              border-radius: bgg(52);
//              float: right;
//              line-height: bgg(52);
//              padding-left: bgg(70);
//              padding-right: bgg(70);
//              box-sizing: border-box;
//              word-break: break-all;
//              margin-top: bgg(-51);
//              margin-right: bgg(21);
//          }
//          .search{
//              font-size: bgg(35);
//              color: #ffffff;
//              position: absolute;
//              top: bgg(3);
//              left: bgg(93);
//          }
//      }
    }
    section{/**********这里是内容样式**********/
        width: 100%;
//      height: 100%;
        background: rgba(0,0,0,0.7);
        font-size: 0;
        padding-bottom: bgg(35);
        .search_box{
            margin-top: bgg(17);
            display: inline-flex;
            position: relative;
            .yuan{
                width: bgg(50);
                height: bgg(50);
                background: #b60005;
                border-radius: 50%;
//              margin-top: bgg(18);
                margin-left: bgg(12);
                display: inline-block;
            }
            .font{
                font-size: bgg(40);
                color: #ffffff;
                position: absolute;
                top: bgg(3);
                left: bgg(18);
            }
            input{
                width: bgg(534);
                height: bgg(52);
                border: bgg(2) solid #ffffff;
                color: #ffffff;
                font-size: bgg(26.89);
                background: #1f1f1f;
                border-radius: bgg(52);
                float: right;
                line-height: bgg(52);
                padding-left: bgg(70);
                padding-right: bgg(70);
                box-sizing: border-box;
                word-break: break-all;
                margin-left: bgg(22);
//              margin-top: bgg(-51);
//              margin-right: bgg(21);
            }
            .search{
                font-size: bgg(35);
                color: #ffffff;
                position: absolute;
                top: bgg(3);
                left: bgg(93);
            }
        }
        .border_top{
            width: bgg(610);
            border-top: bgg(1) solid #636363;
            margin: 0 auto;
            margin-top: bgg(15);
        }
        .section_top{
            width: 100%;
            text-align: center;
            margin: 0 auto;
//          margin-top: bgg(-3);
//          .top_margin{
//              width: bgg(610);
//              border-top: bgg(1) solid #636363;
//              margin: 0 auto;
//          }
            .img{
                margin-top: bgg(30);
                position: relative;
                border-radius: 50%;
                img{
                    width: bgg(132);
                    height: bgg(133);
                    border-radius: 50%;
                    display: inline-block;
                }
                .yuan{
//                  float: right;
                    position: absolute;
//                  z-index: +1;
                    top: 0;
                    right: bgg(250);
                    width: bgg(35);
                    height: bgg(35);
                    background: #ff0000;
                    border-radius: 50%;
                    span{
                        color: #ffffff;
                        font-size: bgg(20.69);
                        margin-top: bgg(2);
                        display: block;
                    }
                }
            }
            .mingzi{
                color: #ffffff;
                font-size: bgg(24.86);
//              margin-right: bgg(10);
                margin-top: bgg(15);
                display: inline-block;
                margin-left: bgg(-97);
            }
            .personal_center{
                width: bgg(93);
                height: bgg(22);
                border: bgg(1) solid #d9d9d9;
                line-height: bgg(22);
                padding-right: bgg(6);
                position: relative;
                display: inline-block;
                margin-right: bgg(222);
                margin-top: bgg(-27);
                span{
                    color: #ffffff;
                    font-size: bgg(14.2);
                }
                .copy{
                    font-size: bgg(24);
//                  color: red;
                    position: absolute;
                    top: bgg(1);
                    right: bgg(3);
                    color: #5c5c5c;
                }
            }
            .four{
                color: #eeca02;
                font-size: bgg(24);
                margin-top: bgg(8);
                display: inline-block;
                letter-spacing: bgg(10);
            }
            .xing{
                margin-left: bgg(13);
            }
            .attention{
                margin-top: bgg(10);
                span:nth-child(1){
                    color: #FFFFFF;
                    font-size: bgg(23.08);
                    margin-left: bgg(15);
                }
                span:nth-child(2){
                    color: #a40409;
                    font-size: bgg(23.08);
                }
                span:nth-child(3){
                    color: #FFFFFF;
                    font-size: bgg(23.08);
                }
                span:nth-child(4){
                    color: #b60005;
                    font-size: bgg(23.08);
                }
            }
            .collect{
                margin-top: bgg(21);
                margin-left: bgg(90);
                margin-right: bgg(20);
                a{
                    display: inline-block;
                    text-decoration: none;
                    width: bgg(220);
                    height: bgg(53);
                    background: #b60005;
                    border-radius: bgg(53);
                    font-size: bgg(23.08);
                    color: #ffffff;
                    text-align: center;
                    line-height: bgg(53);
                    &:active{
                        color: red;
                    }
                }
            }
            .issue{
                margin-left: 0;
                margin-right: 0;
                a{
                    color: #ffffff;
                    background: #cdcdcd;
                }
            }
            .tiao{
                width: 100%;
                height: bgg(23);
                background: #303030;
                margin-top: bgg(20);
                opacity: 0.3;
            }
        }
        .section_bot{
            width: 90.31%;
            height: 100%;
            display: block;
            margin: 0 auto;
//          text-align: center;
            .gimc{
                
                a{
                    display: inline-block;
                    width: 100%;
                    height: bgg(91);
//                  &:active{
//                      color: red;
//                  }
                    span{
                        color: #656565;
                        font-size: bgg(23.08);
                        margin-top: bgg(45);
                        display: inline-block;
                    }
                    .copy{
                        color: #656565;
                        font-size: bgg(40);
                        float: right;
                        margin-top: bgg(37);
                    }
                }
            }
            .xian_top{
                border-top: bgg(1) solid #7c7979;
                width: 100%;
            }
            .xian_bot{
                border-bottom: bgg(1) solid #7c7979;
                width: 100%;
            }
        }
//      .jieshao{
//          color: #FFFFFF;
//          font-size: bgg(21.31);
//          margin-top: bgg(30);
//          text-align: center;
//      }
        .bianxian{
            margin: 0 auto;
            text-align: center;
            .jieshao{
                color: #FFFFFF;
                font-size: bgg(21.31);
                margin-top: bgg(26);
                text-align: center;
            }
            .bian{
                border: bgg(1) solid #7c7979;
                width: bgg(430);
                margin-top: bgg(26);
                display: inline-block;
                opacity: 0.5;
            }
        }
        .gimc{
            a{
                display: inline-block;
                width: 100%;
                height: bgg(82);
                span{
                    color: #ffffff;
                    font-size: bgg(24);
                    margin-top: bgg(41);
                    display: inline-block;
                }
                .copy{
                    color: #ffffff;
                    font-size: bgg(24);
                    float: right;
                    margin-top: bgg(41);
                }
            }
        }
        .xian{
            border-top: bgg(1) solid #7c7979;
            width: 100%;
            margin-top: bgg(25);
        }
        .button{
            text-align: center;
            margin-top: bgg(28);
            input{
                width: bgg(180);
                height: bgg(53);
                background: #b60005;
                border-radius: bgg(53);
                font-size: bgg(23.08);
                color: #ffffff;
                line-height: bgg(53);
                &:active{
                    color: red;
                }
            }
        }
    }
    footer{
        /*************这里是尾部样式*************/
    }
}
